<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        * {
            user-select: none;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h1>您输入的是：{{message + 1}} </h1>
        <input :value="message" @input="change" type="text">
        <hr>
        <!-- 双向数据绑定 -->
        <!-- .lazy 默认双向绑定监听的是 input 事件，可以通过该修饰符改为 change事件 -->
        <!-- <input v-model.lazy="message" type="text"> -->

        <!-- .number 让用户输入的内容自动转换为数字类型 -->
        <!-- <input v-model.number="message" type="text"> -->

        <!-- .trim 去掉首尾空格，中间空格无法去除 -->
        <input v-model.trim="message" />
        <textarea v-model="message"></textarea>


        <hr>

        <div>
            <h1>复选框</h1>
            是否同意该用户协议
            <input id="a" type="checkbox" v-model="checkbox" true-value="同意" false-value="不同意">
            <!-- <label for="a"> {{checkbox ? '同意' : '不同意' }} </label> -->
            <label for="a"> {{checkbox}} </label>
        </div>

        <div>
            <h1>多个复选框</h1>
            <!-- 多个复选框的时候要绑定一个数组，而且每个复选框的 value 值是不同的 -->
            <input type="checkbox" v-model="checkboxList" value="苹果">苹果
            <input type="checkbox" v-model="checkboxList" value="香蕉">香蕉
            <input type="checkbox" v-model="checkboxList" value="草莓">草莓
            <input type="checkbox" v-model="checkboxList" value="葡萄">葡萄

            <p> {{checkboxList}} </p>
        </div>

        <div>
            <h1>单选</h1>
            <input type="radio" v-model="sex" value="男" id="sex1">
            <label for="sex1">男</label>

            <input type="radio" v-model="sex" value="女" id="sex2">
            <label for="sex2">女</label>

            <p> 你选择的是：{{sex}} </p>
        </div>


        <div>
            <h1>选择器</h1>
            <p>你选择的是：{{selected}} </p>

            <!-- <select v-model="selected" name="" id="">
                <option disabled>请选择</option>
                <option>西北风</option>
                <option>黄焖鸡</option>
                <option>烧烤</option>
                <option>麻辣烫</option>
            </select> -->

            <!-- 
                option 中如果没有设置 value 值，选中之后会自动去除标签的内容作为 value 值
                option 中有 value 值，选中之后就会取出 value 值
             -->
            <select v-model="selected" name="" id="">
                <option disabled>请选择</option>
                <option value="1">西北风</option>
                <option value="2">黄焖鸡</option>
                <option value="3">烧烤</option>
                <option value="4">麻辣烫</option>
            </select>
        </div>


    </div>


    <div style="padding-bottom: 500px;"></div>
</body>
<script>
    const app = {
        data() {
            return {
                message: '',
                checkbox: '不同意',
                checkboxList: [],
                sex: '男',
                selected: '请选择'
            }
        },
        methods: {
            change() {
                console.log(event.target.value);
                this.message = event.target.value
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>